<template>
  <div class="home">
    <!-- // 首页导航bar -->
    <van-nav-bar>
      <template #left>
        <van-image
          width="30"
          fit="contain"
          :src="require('@/assets/logo3.png')"
        ></van-image>
      </template>

      <template #right>
        <van-button
          class="btn-search"
          round
          icon="search"
          type="primary"
          @click="$router.push('/search')"
        >搜索</van-button>
      </template>
    </van-nav-bar>
    <!-- 首页频道列表 -->
    <van-tabs
      class="my-tabs"
      v-model="value"
    >
      <van-tab
        v-for="item in channels"
        :key="item.id"
        :title="item.name"
      >
        <articleList :channel_id="item.id" />
      </van-tab>
      <van-icon
        class="icon-channel"
        name="wap-nav"
        @click="show=true"
      />
    </van-tabs>
    <!-- 频道管理界面 -->
    <van-action-sheet
      v-model="show"
      title="频道管理"
    >
      <!-- 对于我们封装的组件，$event就是组件传递过来的值 -->
      <channel-edit
        :ownChannels="channels"
        :allChannels="allChannels"
        :value="value"
        @input="value=$event"
        @close="show=false"
      />
    </van-action-sheet>
  </div>
</template>

<script>
import { channelsAPI, channelsAllAPI } from "@/api";
import articleList from "./articleList";
import channelEdit from "./channelEdit";
import { setChannel, getChannel } from '@/utils/storage'
export default {
  data() {
    return {
      channels: [], // 频道横列表
      show: false, // 频道表格弹框

      allChannels: [], // 所有频道表格
      value: 0 // 点中的横频道高亮
    };
  },
  components: {
    articleList,
    channelEdit
  },
  methods: {
  },
  async created() {
    // 1. 发请求获取用户自己的频道
    let local = getChannel()
    if (this.$store.state.tokenObj.token || !local) {
      // 有token及第一次登录无token
      let res = await channelsAPI();
      this.channels = res.data.data.channels;
    } else {
      // 曾经拜访但是没登录
      this.channels = local
    }
    // 2. 获取所有频道
    let res2 = await channelsAllAPI();
    this.allChannels = res2.data.data.channels;
  },
};
</script>

<style lang="less" >
.home {
  height: 100vh;
  .btn-search {
    background-color: rgba(255, 255, 255, 0.2);
    width: 100px;
    height: 30px;
    border: none;
    .van-icon-search {
      color: #fff;
    }
  }
  .van-tabs {
    width: 93%;
  }
  .my-tabs {
    .van-tabs__nav {
      width: 90%;
    }
    .icon-channel {
      position: absolute;
      right: -20px;
      top: 47%;
      transform: translateY(-50%);
      font-size: 20px;
      width: 10%;
      text-align: center;
    }
  }
}
</style>
